import { Query } from '@/hook/mapgis-api/Query'
import { setMark } from '@/hook/ol-api/setMark.js'
import { claerMap } from '@/hook/MapClear.js'
import { addPopUp } from '@/hook/mapgis-api/addPopUp'

import { ref, nextTick, onMounted, getCurrentInstance, watch, onUnmounted } from 'vue'

import imgurl from '@/assets/image/location.png'
import { ElMessage } from 'element-plus'

import { useCommonStore } from '@/stores/common'
import { storeToRefs } from 'pinia'

/** 设置搜索图层 */
let service = {
  name: import.meta.env.VITE_DOC_NAME,
  /* 图层id */
  layerId: import.meta.env.VITE_EVENT_LayerID
}
/* 图层设置 */
let source = new ol.source.Vector({})
/* 设置高亮图层 */
let query_layer = new ol.layer.Vector({
  name: '搜索图层',
  source: new ol.source.Vector({})
})
/** 格式化事件等级 */
const formatterLevel = (data) => {
  data = parseInt(data)
  switch (data) {
    case 1:
      return '轻微事故'
    case 2:
      return '一般事故'
    case 3:
      return '重大事故'
    case 4:
      return '特大事故'
  }
}
const formatterStatus = (data) => {
  data = parseInt(data)
  switch (data) {
    case 0:
      return '待处理'
    case 1:
      return '处理中'
    case 2:
      return '已归档'
  }
}
/**监听鼠标事件 */
let pointerMoveListener = null
let pointerClickListener = null
/**设置弹窗 */
let InputPopupOverlay = null

/**数据获取算法 */
export const selectData = ref({})
const filterData = (data, type) => {
  console.log(type)
  if (type === 'common') {
    selectData.value = {
      事件等级: formatterLevel(data.get('values_').事件等级),
      发生时间: data.get('values_').发生时间,
      发生地点: data.get('values_').发生地点,
      处理状态: formatterStatus(data.get('values_').处理状态)
    }
  } else {
    selectData.value = {
      事件等级: formatterLevel(data.get('values_').事件等级),
      事件类型: data.get('values_').事件类型,
      发生时间: data.get('values_').发生时间,
      发生地点: data.get('values_').发生地点,
      车牌号: data.get('values_').车牌号,
      驾驶员: data.get('values_').驾驶员,
      处理状态: formatterStatus(data.get('values_').处理状态)
    }
  }
}

/** 根据事件图层查询图层 */
export const usequeryInput = () => {
  /* 引入公共状态管理对象 */
  const store = useCommonStore()
  const { InputFlag } = storeToRefs(store)
  const { proxy } = getCurrentInstance()
  let $map = null
  /**检索用户类型 */
  let type = ref('')
  let data = JSON.parse(localStorage.getItem('data'))
  type.value = data.type

  /**清空上次查询 */
  const InputQuery = (inputvalue) => {
    // claerMap($map)
    query_layer.getSource().clear()
    source.clear()
    InputPopupOverlay.setPosition(undefined)
    // console.log(inputvalue)
    Query.queryByAttr({
      service,
      keyword: inputvalue,
      type: type,
      success: (feature) => {
        // console.log(feature)
        if (!feature) {
          ElMessage({
            message: '未查询到结果!',
            type: 'error'
          })
          return
        }
        query_layer.getSource().addFeatures(feature)
      }
    })
  }
  const clearInputQuery = () => {
    claerMap($map)
  }
  /** 监听鼠标移动事件 */
  function pointermove(e) {
    let pixel = $map.getEventPixel(e.originalEvent)
    let hit = $map.hasFeatureAtPixel(pixel)
    document.body.style.cursor = hit ? 'pointer' : ''
  }
  /** 监听鼠标点击事件 */
  function pointerclick(e) {
    const feature = $map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
      if (layer) {
        return feature
      }
    })
    if (feature) {
      let position = feature.getGeometry().flatCoordinates
      InputFlag.value = true
      filterData(feature, type.value)
      nextTick(() => {
        InputPopupOverlay.setPosition(position)
      })
    }
  }
  onMounted(() => {
    $map = proxy.$map
    InputPopupOverlay = addPopUp.add({
      target: document.querySelector('#InputPopup'),
      offset: [0, -40]
    })
    query_layer.setStyle(setMark(imgurl))
    $map.addLayer(query_layer)
    $map.addOverlay(InputPopupOverlay)
    /**添加移动监听器 */
    $map.on('pointermove', pointermove)
    $map.on('click', pointerclick)
    /**添加点击监听器 */
  })
  onUnmounted(() => {
    $map.removeLayer(query_layer)
    $map.un('pointermove', pointermove)
    $map.un('click', pointerClickListener)
    claerMap($map)
  })
  return {
    InputQuery,
    clearInputQuery
  }
}
